<template>
	<view class="footer" :style="{'padding-bottom': safeAreaBottom}">
		<view class="fix-wrap nav" :style="{'padding-bottom': safeAreaBottom}">
			<navigator :url="item.url" open-type="reLaunch" hover-class="none"
				:class="['item',{'active':item.currentIndex==switchTab}]" v-for="(item,index) in navList" :key="index">
				<view class="icon">
					<image v-if="item.currentIndex==switchTab" :src="item.selectIcon" mode="widthFix"></image>
					<image v-else :src="item.icon" mode="widthFix"></image>
					<view v-if="item.count>0" class="count">{{item.count>99?'99+':item.count}}</view>
				</view>
				<view class="name">{{item.name}}</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			switchTab: {
				type: Number
			}
		},

		data() {
			return {
				navList: [{
						name: '菜园',
						currentIndex: 1,
						icon: require('../static/images/index.png'),
						selectIcon: require('../static/images/index_active.png'),
						count: 0,
						url: '/pages/index/index'
					},
					{
						name: '智能',
						currentIndex: 2,
						icon: require('../static/images/zn.png'),
						selectIcon: require('../static/images/zn_active.png'),
						count: 0,
						url: '/pages/zhineng/zhineng'
					},
					{
						name: '产品',
						currentIndex: 3,
						icon: require('../static/images/cp.png'),
						selectIcon: require('../static/images/cp_active.png'),
						count: 0,
						url: '/pages/product/index'
					},
					{
						name: '我的',
						currentIndex: 4,
						icon: require('../static/images/home.png'),
						selectIcon: require('../static/images/home_active.png'),
						count: 0,
						url: '/pages/home/home'
					}
				]
			}
		},

		computed: {
			safeAreaBottom() {
				return getApp().globalData.safeAreaBottom + 'px';
			},
		},

	}
</script>

<style lang="less" scoped>
	/*
		自定义菜单栏
	*/

	.footer {
		height: 50px;

		.fix-wrap {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 100;
			width: 100%;
			height: 50px;
			background: #fff;
			border-top: 1rpx solid #eee;
		}

		.nav {
			height: 50px;
		}
	}

	.nav {
		display: flex;
		justify-content: space-around;

		.item {
			width: 1%;
			flex-grow: 1;
			text-align: center;
			color: #999;

			.name {
				font-size: 24rpx;
			}

			.icon {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50rpx;
				height: 50rpx;
				margin: 8rpx auto 0;

				image {
					width: 80%;
					height: 80%;
				}

				.iconfont {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
				}

				.splot {
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					z-index: 1;
					width: 16rpx;
					height: 16rpx;
					background: #f00;
					border-radius: 50%;
				}

				.count {
					position: absolute;
					left: 28rpx;
					top: -5rpx;
					z-index: 1;
					min-width: 14rpx;
					padding: 0 8rpx;
					height: 30rpx;
					line-height: 30rpx;
					background: #f00;
					border-radius: 38rpx;
					color: #fff;
					font-size: 22rpx;
				}
			}
		}

		.active {
			color: #00aa7f;
		}
	}
</style>